<template>
  <view class="repair-task-container">

    <!-- 筛选区域 -->
    <view class="filter-section">
      <text class="total-count">共{{ filteredTasks.length }}条</text>
      
      <!-- 状态筛选 -->
      <picker mode="selector" :range="statusOptions" :value="statusIndex" @change="onStatusChange" class="filter-item">
        <view class="filter-content">
          <text class="filter-label">状态:</text>
          <text class="filter-value">{{ statusOptions[statusIndex] }}</text>
          <text class="filter-arrow">▼</text>
        </view>
      </picker>

      <!-- 维修方式筛选 -->
      <picker mode="selector" :range="repairTypeOptions" :value="repairTypeIndex" @change="onRepairTypeChange" class="filter-item">
        <view class="filter-content">
          <text class="filter-label">维修方式:</text>
          <text class="filter-value">{{ repairTypeOptions[repairTypeIndex] }}</text>
          <text class="filter-arrow">▼</text>
        </view>
      </picker>

      <!-- 日期筛选按钮 -->
      <view class="filter-item" @click="showDatePicker">
        <view class="filter-content">
          <text class="filter-icon">📅</text>
          <text class="filter-label">日期</text>
        </view>
      </view>
    </view>

    <!-- 任务列表 -->
    <view class="task-list">
      <view class="task-item" v-for="(task, index) in filteredTasks" :key="index">
        <view class="task-header">
          <text class="repair-number">维修单号：{{ task.repairNumber }}</text>
          <text class="task-status" :class="task.status === '进行中' ? 'status-ongoing' : 'status-completed'">
            {{ task.status }}
          </text>
        </view>
        <view class="task-info">
          <text class="info-label">维修方式：</text>
          <text class="info-value">{{ task.repairType }}</text>
        </view>
        <view class="task-info">
          <text class="info-label">预约日期：</text>
          <text class="info-value">{{ task.appointmentTime }}</text>
          <button class="detail-btn" @click="viewDetail(task.repairNumber)">查看详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义维修任务类型
interface RepairTask {
  repairNumber: string;
  status: string;
  repairType: string;
  appointmentTime: string;
}

// 状态选项
const statusOptions = ['全部', '进行中', '已完成'];
const statusIndex = ref(0);

// 维修方式选项
const repairTypeOptions = ['全部', '到店维修', '上门取车'];
const repairTypeIndex = ref(0);

// 任务列表数据
const tasks = ref<RepairTask[]>([
  {
    repairNumber: '3353252',
    status: '进行中',
    repairType: '到店维修',
    appointmentTime: '2022-11-10 11:00'
  },
  {
    repairNumber: '3353252',
    status: '已完成',
    repairType: '到店维修',
    appointmentTime: '2022-11-10 11:00'
  },
  {
    repairNumber: '3353252',
    status: '进行中',
    repairType: '上门取车',
    appointmentTime: '2022-11-10 11:00'
  }
]);

// 根据状态和维修方式筛选任务
const filteredTasks = computed(() => {
  // 先获取所有任务
  let filtered = [...tasks.value];
  // 如果状态不是"全部"，则根据状态筛选
  if (statusIndex.value != 0) {
    filtered = filtered.filter(task => task.status === statusOptions[statusIndex.value]);
  }
  // 如果维修方式不是"全部"，则根据维修方式筛选
  if (repairTypeIndex.value != 0) {
    filtered = filtered.filter(task => task.repairType === repairTypeOptions[repairTypeIndex.value]);
  }
  return filtered;
});

// 状态筛选变化处理
const onStatusChange = (e: any) => {
  statusIndex.value = e.detail.value;
};

// 维修方式筛选变化处理
const onRepairTypeChange = (e: any) => {
  repairTypeIndex.value = e.detail.value;
};

// 显示日期选择器
const showDatePicker = () => {
  (uni as any).showDatePicker({
    success: (res) => {
      console.log('选择的日期:', res);
      // 这里可以添加日期筛选逻辑
    },
    fail: (err) => {
      console.error('日期选择失败:', err);
    }
  });
};

// 查看详情
const viewDetail = (repairNumber: string) => {
  console.log('查看维修详情:', repairNumber);
  // 跳转到维修详情页面
  uni.navigateTo({
    url: `/pages/repairTask/repairDetail?repairNumber=${repairNumber}`
  });
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.repair-task-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left,
.header-right {
  width: 60rpx;
  text-align: center;
}

.back-icon {
  font-size: 48rpx;
  color: #333333;
}

.more-icon {
  font-size: 24rpx;
  color: #333333;
}

.header-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx;
  flex-wrap: wrap;
  gap: 20rpx;
}

.total-count {
  font-size: 28rpx;
  color: #666666;
  margin-right: 20rpx;
}

.filter-item {
  margin-right: 20rpx;
}

.filter-content {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
}

.filter-label {
  font-size: 28rpx;
  color: #666666;
  margin-right: 8rpx;
}

.filter-value {
  font-size: 28rpx;
  color: #333333;
  margin-right: 4rpx;
}

.filter-arrow {
  font-size: 24rpx;
  color: #999999;
  margin-left: 4rpx;
}

.filter-icon {
  font-size: 28rpx;
  margin-right: 4rpx;
}

/* 任务列表 */
.task-list {
  padding: 0 30rpx;
}

.task-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.repair-number {
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
}

.task-status {
  font-size: 28rpx;
  font-weight: 600;
  padding: 4rpx 16rpx;
  border-radius: 14rpx;
}

.status-ongoing {
  color: #1989fa;
  background-color: #e6f7ff;
}

.status-completed {
  color: #52c41a;
  background-color: #f6ffed;
}

.task-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  justify-content: space-between;
}

.task-info:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  flex: 0 0 auto;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
  text-align: left;
}

.detail-btn {
  font-size: 26rpx;
  color: #1989fa;
  background-color: transparent;
  padding: 0;
  margin: 0;
  line-height: normal;
}
</style>